<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="d" uri="http://dgg.net/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title></title>
    <c:import url="../../header.jsp"/>
    <link rel="stylesheet" href="${baseStaticUrl}/dggui/dggui-3.0/pages/order/orderSuccessDetail/orderSuccessDetail.css">
</head>
<body>
<div class="content-warp">
    <div class="bg-warp">
        <h2 class="dggui-page-title">成单客户详情</h2>
        <div class="dggui-panel">
            <h3>客户基础信息</h3>
            <div class="panel-main">
                <table class="dggui-table-info">
                    <tbody>
                    <tr>
                        <th>客户名称：</th>
                        <td>${completeCustomer.customerName}</td>
                        <th>客户编号：</th>
                        <td>${completeCustomer.customerNo}</td>
                        <th>身份证号：</th>
                        <td>${completeCustomer.customerCardId}</td>
                        <th>电话号码：</th>
                        <td>${completeCustomer.customerPhone}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="dggui-panel">
            <h3>商机信息</h3>
            <div class="panel-main">
                <table class="dggui-table-info">
                    <tbody>
                    <c:forEach var="key" items="${businessMap}">
                        <tr>
                            <th>商机编号：</th>
                            <td>${key.businessNo}</td>
                            <th>业务类型：</th>
                            <td>${key.busTypeCode}</td>
                            <th>所属商务：</th>
                            <td>${key.belongUser}</td>
                            <th>所属部门：</th>
                            <td>${key.belongUserOrg}</td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="dggui-panel">
            <h3>订单详情 <span>包含生产单详情</span></h3>
            <div class="dggui-tab-scroll">
                <ul class="dggui-tab-title">
                    <c:forEach items="${orderNos}" var="key" varStatus="keyStatus">
                        <li class="<c:if test="${keyStatus.index==0}">active</c:if> tab-switch" data-orderId="${key.orderId}" onclick="getOrderInfo('${key.orderId}')">${key.orderNo}</li>
                    </c:forEach>
                </ul>
                <a href="javascript:void(0)" class="next-prev prev"></a>
                <a href="javascript:void(0)" class="next-prev next"></a>
                <div id="orderInfo">

                </div>
            </div>
        </div>
    </div>
</div>
<c:import url="/WEB-INF/jsp/footer.jsp"/>
<script>
    dggui.use(['jquery'],function () {
        //左右滑动效果开始
        $('.dggui-tab-title').each(function () {
            var nwidth=0,
                vLen=$(this).children().length;
            $(this).children().each(function (i) {
                var thisWidth=$(this).outerWidth();
                if(i==0 || i==vLen-1) {
                    nwidth+=thisWidth+32;
                }else {
                    nwidth+=thisWidth+64;
                }
                $(this).attr("data-index",i);
            });
            $(this).css("width",nwidth);
        });
        $('.dggui-tab-scroll').each(function () {
            var scrollW=$(this).width();
            var scrollI=$(this).find('.dggui-tab-title').width();
            if(scrollW<scrollI) {
                $(this).addClass('scroll');
            }
        });
        $('.next-prev').click(function () {
                var isPrev=$(this).hasClass('prev');
                var nleft=parseInt($(this).parent().find('.dggui-tab-title').css("left"));
                var nWidth=$(this).parents('.dggui-tab-scroll').width();
                var inWidth=$(this).parent().find('.dggui-tab-title').width();
                var vleft;
                if(isPrev) {
                    if(nleft==0) {
                        return false;
                    }else {
                        vleft=nleft+nWidth;
                        if(vleft>0) {
                            vleft=0;
                        }
                    }
                }else {
                    vleft=nleft-nWidth;
                    if(-parseInt(vleft-nWidth)>inWidth) {
                        vleft=-(inWidth-nWidth);
                    }
                }
                $(this).parent().find('.dggui-tab-title').css("left",vleft)
            });
        window.onresize=function(){
            $('.dggui-tab-scroll').each(function () {
                var scrollW=$(this).width();
                var scrollI=$(this).find('.dggui-tab-title').width();
                var nleft=parseInt($(this).find('.dggui-tab-title').css("left"));
                var vleft;
                var nWidth=$(this).width();
                var inWidth=$(this).find('.dggui-tab-title').width();
                if(scrollW<scrollI) {
                    $(this).addClass('scroll');
                }
                if(nleft>0) {
                    vleft=0;
                }else if(-parseInt(nleft-nWidth)>inWidth) {
                    vleft=-(inWidth-nWidth);
                }
                $(this).find('.dggui-tab-title').css("left",vleft)
            });
        }
        //左右滑动效果结束
        $(".tab-switch").click(function () {
            var orderId = $(this).attr("data-orderId");
            $(".tab-switch").each(function () {
                if (orderId == $(this).attr("data-orderId")) {
                    $(this).addClass("active");
                } else {
                    $(this).removeClass("active");
                }
            })
        })

        $(".tab-switch").each(function () {
            if($(this).hasClass("active")){
                var orderId = $(this).attr("data-orderId");
                getOrderInfo(orderId);
            }
        })
    });

    //根据订单id查询认款及生产单信息
    function getOrderInfo(orderId) {
        $.post(sysInfo.basePath + '/rzsc/complete_customer/order_info.html', {orderId: orderId}, function (html) {
            $("#orderInfo").html(html);
        },'html');
    }

</script>
</body>
</html>